import styles from './index.less';
import { Button, Input, Modal, Select } from 'antd';
import { CloseOutlined, EditOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Rule } from '@/component/rules/interface';
import Conditions from '@/component/conditions';
import { Condition } from '@/component/conditions/interface';

interface RulesProps {
  value: Rule;
  index: number;
  delRule: () => void;
}

export default function Rules(props: RulesProps) {
  const { value, index, delRule } = props;

  const [isModifying, setIsModifying] = useState<boolean>(false);
  const [visible, setVisible] = useState<boolean>(false);

  function showModal(isVisible: boolean) {
    setVisible(isVisible);
  }

  function getExpression(condition: Condition): string {
    if (condition.group) {
      return `(${condition.group.children
        .map(getExpression)
        .join(` ${condition.group.type} `)})`;
    }
    const exp = `${condition.variable} ${condition.operator} ${condition.value}`;
    if (condition.if) {
      return `not(${exp})`;
    }
    return exp;
  }

  function handleOk(data: Condition) {
    value.conditions = data;
    value.expression = data.group?.children
      .map(getExpression)
      .join(` ${data.group.type} `);
    showModal(false);
  }

  function changeValue(str: string) {
    value.comment = str;
  }

  return (
    <>
      <div className={styles.wrapper}>
        <div className={styles.title}>
          <span>规则条件-{index + 1}</span>
          {isModifying ? (
            <CloseOutlined onClick={() => setIsModifying(false)} />
          ) : (
            <EditOutlined onClick={() => setIsModifying(true)} />
          )}
        </div>
        {isModifying && (
          <>
            <hr className={styles.hr} />
            <div className={styles.rule}>
              <div className={styles.ruleTitle}>条件表达式</div>
              <div className={styles.ruleExpression}>{value.expression}</div>
              <div className={styles.ruleBtn}>
                {value.conditions ? (
                  <Button onClick={() => showModal(true)}>编辑条件</Button>
                ) : (
                  <Button onClick={() => showModal(true)}>添加条件</Button>
                )}
              </div>
            </div>
            <div>
              <div className={styles.title}>下个节点</div>
              <Select placeholder={'自定义算子'} style={{ width: '100%' }} />
            </div>
            <div>
              <div className={styles.title}>备注 - 可选</div>
              <div className={styles.ruleTitle}>
                提供规则简短的描述信息，可用于图标显示中
              </div>
              <Input
                placeholder="描述内容"
                maxLength={100}
                value={value.comment}
                onBlur={(e) => changeValue(e.target.value)}
              />
            </div>
            <Button danger className={styles.rule} onClick={delRule}>
              删除
            </Button>
          </>
        )}
        <Modal
          visible={visible}
          width={'100%'}
          title={'添加条件'}
          footer={null}
          onCancel={() => showModal(false)}
          destroyOnClose={true}
          maskClosable={false}
          bodyStyle={{
            maxHeight: 750,
            overflow: 'auto',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <Conditions value={value.conditions} onOk={(res) => handleOk(res)} />
        </Modal>
      </div>
    </>
  );
}
